<template>
  <div class="ChildrensDay">
    <navigation image_="0" title="心粽有你" :scrollTop="false" :show="true" v-on:getHeight="getHeight($event)" />
    <div class="Childlike" :style="{ marginTop: Height + 'px' }">
      <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/duanwu_time_img.png" alt="" />
      <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/duanwu_title.png" alt="" />
      <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/duanwu_rule_btn.png" alt=""
        @click="rule_model=true" />
    </div>
    <div class="activity_center">
      <div class="active_play">
        <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/duanwu_play_title.png" alt="" />
        <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/text1.png" alt="" />
        <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/text2.png" alt="" />
      </div>
      <div class="ba_clouds_img">
        <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/clouds_img.png" alt="" />
      </div>
      <div class="avtive_Raffle">
        <img class="img_top_title"
          src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/duanwu_prize_title.png" alt="" />
        <div class="speed">
          <div class="progressBar progress">
            <div class="progress-bar progress-bar-info active2" :style="'width:' + my_info.lottery_percent + '%'"></div>
            <div class="img_percentage" :style="'left:' + (my_info.lottery_percent-10) + '%'">
              <div class="frequency">
                <span>{{my_info.lottery_num}}次</span>
              </div>
            </div>
          </div>
          <div class="total">
            {{my_info.limit_num}}次
          </div>
        </div>
        <div class="RotatingLottery">
          <div class="DrawNow">
            <img v-if="my_info.remain_num"
              src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/prize_btn.png" alt=""
              @click="duanwuLottery">
            <img v-else src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/paize_gray_btn.png" alt="">
          </div>
          <div class="prize_array">
            <div :class="'Exhibition'+index" v-for="item,index in prize_list" :key="index">
              <img :src="item.gift_pic" alt="">
              <div class="span_top" v-if="item.gift_type=='2' && item.gift_money>0">限定</div>
              <div :class="isiOS?'span_center span_center1':'span_center span_center2'">
                <span>{{item.gift_name}}</span>
                <span>{{item.gift_desc}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="LuckyDraw">
          <span>你还有</span>
          <div>{{my_info.remain_num}}</div>
          <span>次抽奖机会</span>
        </div>
      </div>
      <div class="ba_clouds_img">
        <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/clouds_img.png" alt="" />
      </div>
      <!-- 排名 -->
      <div class="FortuneList">
        <div class="reward" @click="model_prize=true">
          <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_prize_btn.png" alt="">
        </div>
        <div class="rank_liebiao">
          <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_bg1.png" alt="">
          <div class="transparent_back">
            <div class="back_color"></div>
            <div class="top_Remaining">距截榜还剩:
              <van-count-down :time="showTime" format="DD天HH时mm分ss秒" />
            </div>
            <div class="rank_FirstPlace">
              <template v-if="slice_list.length">
                <div v-for="item,index in slice_list" :key="index" class="stop_first">
                  <div class="header_image">
                    <div :class="'herder_border'+item.rank ">
                      <img :src="item.head_pic" alt="">
                    </div>
                    <img v-if="item.rank == '1'" class="top_mingci1"
                      src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_no.1_crown.png" alt="">
                    <img v-if="item.rank == '2'" class="top_mingci"
                      src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_no.2_crown.png" alt="">
                    <img v-if="item.rank == '3'" class="top_mingci"
                      src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_no.3_crown.png" alt="">
                    <img v-if="item.rank == '1'" class="bottom_mingci1"
                      src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_no.1.png" alt="">
                    <img v-if="item.rank == '2'" class="bottom_mingci"
                      src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_no.2.png" alt="">
                    <img v-if="item.rank == '3'" class="bottom_mingci"
                      src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_no.3.png" alt="">
                  </div>
                  <span>{{splice_(item.nickname)}}</span>
                  <div class="charm_icon">
                    <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_level_icon.png" alt="">
                    <span>{{item.charm}}</span>
                  </div>
                </div>
              </template>
              <span v-else class="empty">暂无数据</span>
            </div>
            <div class="otherRankings">
              <div v-for="item,index in rank_list" :key="index" class="other_rank">
                <span>{{item.rank}}</span>
                <img :src="item.head_pic" alt="">
                <span>{{item.nickname}}</span>
                <div>
                  <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_level_icon.png" alt="">
                  <span>{{item.charm}}</span>
                </div>
              </div>
            </div>
          </div>
          <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_bg3.png" alt="">
          <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_title.png" alt="">

        </div>
      </div>
    </div>
    <!-- 我的排名 -->
    <div class="my_rank">
      <div class="center">
        <img :src="my_info.head_pic" alt="">
        <div>
          <span>{{my_info.nickname}}</span>
          <span>财富值:{{my_info.my_charm}}</span>
        </div>
        <span>排名:{{my_info.my_rank=='0'?'10+':my_info.my_rank}}</span>
      </div>
    </div>

    <van-popup v-model="rule_model" :close-on-click-overlay="false">
      <div class="model_popup">
        <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_close_icon.png" alt=""
          @click="rule_model = false">
        <div class="active_rule">
          <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_rule_title.png" alt="">
          <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_element_img.png" alt="">
          <div class="rule_describe">
            <span>1.活动期间,每收取或送出"心粽有你"(5200钻)限定礼物必得1次抽奖机会并算入财富榜榜单财富值中.</span>
            <span>2.所有钻石礼物及帝王套均算入财富榜榜单的财富值中.</span>
            <span>3.累计抽取50次必得限定礼物.奖品列表如下52000钻礼物;进场特效1天;头像框1天;限定礼物3300钻;玫瑰花朵66朵.</span>
            <span>4.活动结束后财富榜榜单前三名将分别获得对应礼物(详细参考榜单奖励);发放方式请联系声贝客服. </span>
            <span>5.{{isiOS?'本活动与苹果公司无关,最终解释权归声贝所有.':'法律许可范围内,本次活动最终解释权归声贝所有.'}}</span>
          </div>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="model_prize" :close-on-click-overlay="false">
      <div class="model_prize">
        <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_close_icon.png" alt=""
          @click="model_prize = false">
        <div class="active_rule">
          <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_gift_title.png" alt="">
          <div class="rule_describe">
            <div class="List_rewards">
              <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_element_img.png" alt="">
              <span>榜一奖励</span>
              <div class="list_prize">
                <div class="single_prize">
                  <span>52000钻</span>
                  <div class="img_">
                    <img src="http://img.xunyinjiaoyou.com/upload/gift/202205/30/1653897293.png" alt="">
                  </div>
                  <span>童心未泯</span>

                </div>
                <div class="single_prize">
                  <span>15天</span>
                  <div class="img_">
                    <img src=" http://img.xunyinjiaoyou.com/upload/goods/202205/31/1653984295.png" alt=""
                      style="width:130%">
                  </div>
                  <span>端午龙舟竞速</span>

                </div>
                <div class="single_prize">
                  <span>下期</span>
                  <div class="img_">
                    <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/gift_name_img.png" alt="">
                  </div>
                  <span>礼物冠名权</span>
                </div>
              </div>
            </div>
            <div class="List_rewards ">
              <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_element_img.png" alt="">
              <span>榜二奖励</span>
              <div class="list_prize flex_ar">
                <div class="single_prize">
                  <span>33440钻</span>
                  <div class="img_">
                    <img src="http://img.xunyinjiaoyou.com/upload/gift/202205/28/1653717486.png" alt="">
                  </div>
                  <span>求婚钻戒</span>
                </div>
                <div class="single_prize">
                  <span>7天</span>
                  <div class="img_">
                    <img src="http://img.xunyinjiaoyou.com/upload/goods/202205/31/1653984295.png" alt=""
                      style="width:130%">
                  </div>
                  <span>端午龙舟竞速</span>
                </div>
              </div>
            </div>
            <div class="List_rewards">
              <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_element_img.png" alt="">
              <span>榜三奖励</span>
              <div class="list_prize flex_ar">
                <div class="single_prize">
                  <span>13140钻</span>
                  <div class="img_">
                    <img src="http://img.xunyinjiaoyou.com//upload/gift/202112/4/1638616324.png" alt="">
                  </div>
                  <span>泡泡机</span>
                </div>
                <div class="single_prize">
                  <span>3天</span>
                  <div class="img_">
                    <img src="http://img.xunyinjiaoyou.com/upload/goods/202205/31/1653984295.png" alt=""
                      style="width:130%">
                  </div>
                  <span>端午龙舟竞速</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="model_getRewards" :close-on-click-overlay="false">
      <div class="model_getRewards">
        <img src="https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_close_icon.png" alt=""
          @click="model_getRewards = false">
        <div class="result_center">
          <div>
            <div>
              <img :src="duanwuLottery_list.gift_pic" alt="" :style="duanwuLottery_list.long_pic==1?'width:160%':''">
            </div>
            <span>{{duanwuLottery_list.gift_name}}<br />{{duanwuLottery_list.gift_desc}}</span>
          </div>
          <div @click="model_getRewards=false">开心收下</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import {
    Toast,
    Dialog
  } from "vant";
  import navigation from "../../components/navigation";
  export default {
    data() {
      return {
        isiOS: false,
        Height: 48,
        my_info: {},
        prize_list: [],
        rank_list: [], //总数据
        slice_list: [], //前三名
        splice_list: [], //后所有名次
        rule_model: false, //活动规则
        model_prize: false, //活动奖励
        model_getRewards: false, //获得奖励
        duanwuLottery_list: {}, //抽奖奖品
        showTime: 0,
        loading: true,
      };
    },
    components: {
      navigation,
    },
    created() {
      this.$store.commit("empty");
      this.Festival()
    },
    mounted() {
      var u = navigator.userAgent;
      var ua = navigator.userAgent.toLowerCase(); //微信小程序 
      this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // Toast('微信')
        this.Height = 0;
      } else {
        // if (this.isiOS) {
        //   if (window.webkit) {
        //     window.webkit.messageHandlers.setStatusBarTheme.postMessage({
        //       setStatusBarTheme: 0,
        //     });
        //   }
        // } else {
        //   app.setStatusBarTheme(0);
        // }
      }
    },
    methods: {
      duanwuLottery() {
        if (!this.loading) {
          return Toast('重复点击');
        }
        this.loading = false
        let arys = {}; //参数
        let url = "/activity/duanwuLottery";
        this.$.encryption2(arys, url).then((res) => {
            if (res.data.status == 0) {
              this.duanwuLottery_list = res.data.result
              this.model_getRewards = true;
              this.Festival()
            } else {
              Toast(res.data.text)
            }
            this.loading = true
          })
          .catch((res) => {
            this.loading = true;
            Toast(res.data.text)
          })
      },

      splice_(value) {
        let slice2 = "";
        if (value.length > 6) {
          slice2 = value
          slice2 = slice2.slice(0, 5)
          return slice2 + '...';
        } else {
          return value
        }
      },
      Festival() {
        let arys = {}; //参数
        let url = "/activity/duanwuIndex";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.my_info = res.data.result.my_info;
            this.prize_list = res.data.result.prize_list;
            this.rank_list = res.data.result.rank_list;
            this.slice_list = this.rank_list.slice(0, 3)
            this.splice_list = this.rank_list.splice(0, 3)
            const nowDate = new Date()
            const nowtime = parseInt(nowDate.getTime())
            this.showTime = res.data.result.end_time * 1000 - nowtime
          }
        });
      },
      //点击头像进入个人主页
      open_usrt(user) {
        if (window.isiOS) {
          window.webkit.messageHandlers.openProfile.postMessage({
            userId: user,
          });
        } else {
          app.openProfile(user);
        }
      },

      tabtime() {
        let arys = {
          date,
        }; //参数
        let url = "/activity/sweetCpRank";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.list = res.data.result.list;
          }
        });
      },
      getHeight(height) {
        this.Height = height;
      },
    },
  };
</script>
<style scoped lang="less">
  @auto: 0 auto;

  .px (@px, @attr: width) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .fs (@px, @attr: font-size) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .ChildrensDay {
    width: 100vw;
    overflow-x: hidden;
    background: #B5AFFD;
  }

  .Childlike {
    width: 100vw;
    .px(914, Height);
    position: relative;
    background: #fff;
    background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/duanwu_bg.png") no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    >img:nth-of-type(1) {
      .px(448);
      .px(64, margin-top);
    }

    >img:nth-of-type(2) {
      .px(594);
      .px(12, margin-top);
    }

    >img:nth-of-type(3) {
      .px(68);
      position: absolute;
      right: -4px;
      .px(418, top);
    }
  }

  .activity_center {
    width: 100vw;
    background: #b5affd;
    .px(-140, margin-top);

    .active_play {
      position: relative;
      width: 100vw;
      .px(340, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/duanwu_play_frame.png") no-repeat;
      background-size: contain;
      display: flex;
      flex-direction: column;
      align-items: center;

      >img:nth-of-type(1) {
        .px(-6, margin-top);
        .px(360);
      }

      >img:nth-of-type(2) {
        .px(702);
        .px(30, margin-top);
      }

      >img:nth-of-type(3) {
        .px(604);
        .px(32, margin-top);
      }
    }
  }

  .ba_clouds_img {
    width: 100vw;
    .px(86, height);

    img {
      .px(190);
    }
  }

  .avtive_Raffle {
    .px(790);
    .px(968, height);
    margin: @auto;
    .px(-20, margin-top);
    background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/duanwu_prize_frame.png") no-repeat;
    background-size: contain;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .img_top_title {
      .px(494);
      .px(-14, margin-top);
    }

    .speed {
      .px(550);
      .px(116, height);
      display: flex;
      align-items: center;
      position: relative;

      >.total {
        position: absolute;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
        .fs(32);
        .px(-96, right)
      }

      .active2 {
        .px(18, font-size);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #ffffff;
      }

      .progressBar {
        .px(550);
        .px(40, height);
        .px(30, border-radius);
        background: #DAC6FC;
        border: 1px solid #FFFFFF;
        position: relative;
        display: flex;
        align-items: center;

        .img_percentage {
          position: absolute;
          .px(124);
          .px(120, height);
          display: flex;
          justify-content: center;
          background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/prize_speed_zongzi.png") no-repeat;
          background-size: cover;
          z-index: 10;

          .frequency {
            position: absolute;
            .px(80);
            .px(48, Height);
            .px(10, bottom);
            background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/speed_cishu_lab.png") no-repeat;
            background-size: contain;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
              .fs(26);
              font-family: Adobe Heiti Std;
              font-weight: normal;
              color: #FFFFFF;
            }
          }

        }

        .progress {
          overflow: visible;

        }

        .progress-bar {
          float: left;
          width: 0;
          height: 100%;
          -webkit-transition: width 0.6s ease;
          -o-transition: width 0.6s ease;
          transition: width 0.6s ease;
        }

        .progress .progress-bar {
          border-radius: 20px;
          position: relative;
          animation: animate-positive 2s;
        }

        .progress-bar-info {
          background: linear-gradient(0deg, #9EF2FF 1%, #B5AFFD 100%);
          border-radius: 20px;
        }

        @keyframes animate-positive {
          0% {
            width: 0;
          }
        }
      }
    }
  }

  .RotatingLottery {
    width: 100vw;
    .px(700, height);
    background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/prize_heart_img.png") no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .DrawNow {
      .px(318);
      .px(248, height);
      position: relative;
      display: flex;
      justify-content: center;
      z-index: 10;

      img {
        width: 100%;
        position: absolute;
      }

      span {
        .fs(46);
        font-family: PingFang SC;
        font-weight: 900;
        font-style: italic;
        color: #FEFEFE;
        .px(198, line-height);
        -webkit-text-stroke: 1px #C352F9;
        text-stroke: 1px #C352F9;
        z-index: 2;
      }

    }

    .prize_array {
      position: absolute;
      width: 96vw;
      margin: @auto;
      height: 100%;
      display: flex;
      justify-content: center;

      >div {
        position: absolute;
        .px(265);
        .px(255, height);
        background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/qipao.png") no-repeat;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;

        >img {
          .px(154);
        }

        >.span_top {
          position: absolute;
          .px(40, top);
          .px(24, right);
          .fs(24);
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #FFFFFF;
          background: #823EFE;
          border-radius: 6px;
          padding: 2px 6px;
          transform: scale(.7);
        }

        .span_center {
          position: absolute;
          .px(40, bottom);
          display: flex;
          width: 100%;
          flex-direction: column;
          align-items: center;
          .fs(24);
          font-family: PingFang SC;
          font-weight: bold;
          font-style: italic;
          color: #FEFEFE;
          text-shadow: 0px 1.5px 2.5px rgba(135, 4, 218, 0.61);
        }

        // .span_center1 {
        //   font-weight: 900;
        //   .fs(24);
        //   color: #FEFEFE;
        //   .px(2, text-stroke-width);
        //   .px(2, -webkit-text-stroke-width);
        //   -webkit-text-stroke-color: #7455F9;
        // }

        // .span_center2 {
        //   color: #7455F9;
        // }
      }

      .Exhibition1 {
        right: 0%;
        .px(128, top);
      }

      .Exhibition2 {
        .px(378, top);
        .px(100, right);

        >img {
          width: 78%;
          position: absolute;
          .px(80, top);
        }
      }

      .Exhibition3 {
        .px(100, left);
        .px(378, top);
      }

      .Exhibition4 {
        left: 0%;
        .px(128, top);
      }
    }
  }

  .LuckyDraw {
    position: absolute;
    width: 88vw;
    .px(44, height);
    display: flex;
    align-items: center;
    .px(40, bottom);
    justify-content: center;

    >div {
      // .px(36);
      .px(36, height);
      .px(4, border-radius);
      .px(6, margin-left);
      .px(6, margin-right);
      padding: 2px 4px;
      background: #FF7EAA;
      text-align: center;
      .px(36, line-height);
      .fs(34);
      font-family: PingFang SC;
      font-weight: 500;
      color: #FBF9FA;
      text-shadow: 0px 1px 4px rgba(135, 4, 218, 0.61);

    }

    span {
      .fs(34);
      font-family: PingFang SC;
      font-weight: 500;
      color: #FBF9FA;
      text-shadow: 0px 1px 4px rgba(135, 4, 218, 0.61);
    }
  }

  .FortuneList {
    width: 100vw;
    position: relative;

    >.reward {
      position: absolute;
      .px(228);
      .px(208, height);
      .px(-60, top);
      right: 0;
      z-index: 2;

      >img {
        width: 100%;
        height: 100%;
      }
    }

    .rank_liebiao {
      display: flex;
      flex-direction: column;
      .px(790);
      margin: @auto;
      position: relative;
      .px(100, border-radius);
      align-items: center;

      >img {
        width: 100%;
      }

      >img:nth-of-type(3) {
        position: absolute;
        .px(360);
        .px(-8, top)
      }

      .transparent_back {
        width: 100%;
        background-image: linear-gradient(#b5affd, #b5affd, #b5affd, #b5affd, #9FEFFF);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        >.back_color {
          background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_02.png");
          background-size: contain;
          height: 100%;
          width: 100%;
          position: absolute;
          z-index: 0;
        }

        .top_Remaining {
          .px(76, margin-top);
          .fs(32);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          z-index: 2;
          display: flex;

          /deep/.van-count-down {
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            letter-spacing: 0px;
            .fs(32);
          }
        }

        .rank_FirstPlace {
          width: 84.8vw;
          .px(462, height);
          margin: @auto;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 2;
          position: relative;
          .px(62, margin-top);

          .stop_first {
            flex-shrink: 0;
            .px(206);
            .px(392, height);
            background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_no.2_bg.png") no-repeat;
            background-size: contain;
            display: flex;
            flex-direction: column;
            align-items: center;

            .header_image {
              .px(154);
              .px(154, height);
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              .px(44, margin-top);

              .herder_border1 {
                .px(140);
                .px(140, height);
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #F9E036;
                border-radius: 50%;

                img {
                  width: 98%;
                  height: 98%;
                  border-radius: 50%;
                }
              }

              .herder_border2 {
                .px(120);
                .px(120, height);
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #68A5EE;
                border-radius: 50%;

                img {
                  width: 98%;
                  height: 98%;
                  border-radius: 50%;
                }
              }

              .herder_border3 {
                .px(120);
                .px(120, height);
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #DA52B7;
                border-radius: 50%;

                img {
                  width: 98%;
                  height: 98%;
                  border-radius: 50%;
                }
              }

              .top_mingci {
                position: absolute;
                top: -6%;
                right: -6%;
                .px(52);
                transform: rotate(10deg);
              }

              .top_mingci1 {
                position: absolute;
                top: -10%;
                right: -10%;
                .px(52);
                transform: rotate(8deg);
              }

              .bottom_mingci1 {
                position: absolute;
                .px(188);
                .px(0, bottom);
              }

              .bottom_mingci {
                position: absolute;
                .px(154);
                .px(10, bottom);
              }

            }

            >span {
              .fs(32);
              font-family: Adobe Heiti Std;
              font-weight: normal;
              color: #FFFFFF;
              .px(10, padding-top);
              .px(20, padding-bottom);
            }

            .charm_icon {
              display: flex;
              align-items: center;

              >img {
                .px(32);
                .px(12, margin-right)
              }

              span {
                .fs(32);
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #FFFFFF;
              }
            }
          }

          .empty {
            width: 100%;
            height: 100%;
            display: inline-block;
            text-align: center;
            .px(462, line-height);
            .fs(36);
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #FFFFFF;
          }

          >div:nth-of-type(1) {
            position: absolute;
            flex-shrink: 0;
            .px(230);
            .px(462, height);
            background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/rank_no.1_bg.png") no-repeat;
            background-size: contain;
          }

          >div:nth-of-type(2) {
            position: absolute;
            left: 0;
          }

          >div:nth-of-type(3) {
            position: absolute;
            right: 0;
          }
        }

        .otherRankings {
          .px(685);
          margin: @auto;
          z-index: 10;

          .other_rank {
            width: 100%;
            .px(160, height);
            border-bottom: 1px solid #ffffff30;
            display: flex;
            align-items: center;

            >span:nth-of-type(1) {
              .fs(34);
              font-family: PingFang SC;
              font-weight: 600;
              font-style: italic;
              color: #FFFFFF;
            }

            >span:nth-of-type(2) {
              .fs(32);
              font-family: PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
            }

            >img {
              .px(100);
              .px(100, height);
              border-radius: 50%;
              .px(30, margin-left);
              .px(20, margin-right);
            }

            >div {
              margin-left: auto;
              display: flex;
              align-items: center;

              >img {
                .px(32)
              }

              >span {
                .fs(36);
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                .px(20, padding-left);
              }
            }
          }
        }
      }
    }
  }

  .my_rank {
    width: 100vw;
    .px(160, height);
    .px(48, margin-top);
    background: linear-gradient(0deg, #9EB3FF 1%, #B3F5FF 97%);
    border-radius: 10px 10px 0px 0px;
    display: flex;
    align-items: center;

    .center {
      width: 84vw;
      margin: @auto ;
      .px(100, height);
      display: flex;
      align-items: center;
      flex-shrink: 0;

      >img {
        .px(100);
        .px(100, height);
        border-radius: 50%;
        flex-shrink: 0;
      }

      >div {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        .fs(32);
        .px(50, margin-left);

        span {
          .px(2, padding-top);
          .px(2, padding-bottom);
        }
      }

      >span {
        margin-left: auto;
        .fs(34);
        font-family: PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
      }
    }
  }

  /deep/ .van-popup {
    overflow: initial;
    background: 00000000;
  }

  .model_popup {
    .px(680);
    .px(638, height);
    background: url('https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_rule_bg.png') no-repeat;
    background-size: contain;
    position: relative;

    >img {
      position: absolute;
      right: 0;
      .px(-76, top);
      .px(56);
    }

    .active_rule {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      >img:nth-of-type(1) {
        .px(362);
        .px(-8, margin-top);
      }

      >img:nth-of-type(2) {
        .px(504);
        .px(16, margin-top);
      }

      .rule_describe {
        .px(596);
        flex: 1;
        .px(10, margin-bottom);
        .px(36, margin-top);
        overflow-y: scroll;

        span {
          display: inline-block;
          .fs(30);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .px(36, padding-bottom);
          .px(44, line-height)
        }
      }
    }
  }

  .model_prize {
    .px(680);
    .px(879, height);
    background: url('https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_gift_bg.png') no-repeat;
    background-size: contain;
    position: relative;

    >img {
      position: absolute;
      right: 0;
      .px(-76, top);
      .px(56);
    }

    .active_rule {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      >img:nth-of-type(1) {
        .px(362);
        .px(-8, margin-top);
      }

      .rule_describe {
        width: 98%;
        margin: @auto;
        flex: 1;
        .px(10, margin-bottom);
        .px(14, margin-top);
        overflow-y: scroll;

        .List_rewards {
          display: flex;
          flex-direction: column;
          align-items: center;
          .px(40, margin-bottom);

          >img {
            .px(504);
          }

          >span {
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            .fs(36);
            .px(28, padding-top);
            .px(34, padding-bottom);
          }

          .list_prize {
            width: 94%;
            display: flex;
            justify-content: space-between;

            .single_prize {
              .px(194);
              .px(308, height);
              background: url('https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/gift_frame.png') no-repeat;
              background-size: contain;
              display: flex;
              flex-direction: column;
              align-items: center;
              position: relative;

              >span:nth-of-type(1) {
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #FFFFFF;
                .fs(26);
                .px(36, padding-top);
              }

              >.img_ {
                .px(134);
                .px(134, height);
                position: absolute;
                .px(78, bottom);
                display: flex;
                align-items: center;
                justify-content: center;

                >img {
                  width: 100%;
                }
              }

              >span:nth-of-type(2) {
                .fs(24);
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #FAFCFC;
                position: absolute;
                .px(32, bottom)
              }
            }
          }

          .flex_ar {
            display: flex;
            justify-content: center;

            .single_prize {
              .px(32, margin-left);
              .px(32, margin-right);
            }
          }
        }

      }
    }
  }

  .model_getRewards {
    .px(640);
    .px(750, height);
    background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_get_bg.png") no-repeat;
    background-size: contain;
    position: relative;
    justify-content: center;

    >img {
      position: absolute;
      right: 0%;
      top: 0%;
      .px(56);
    }

    .result_center {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      bottom: 0%;
      width: 100%;

      >div:nth-of-type(1) {
        display: flex;
        flex-direction: column;
        align-items: center;

        >div {
          .px(300);
          .px(300, height);
          display: flex;
          align-items: center;
          justify-content: center;

          >img {
            width: 100%;
          }
        }


        span {
          .fs(32);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          text-align: center;
          .px(50, line-height)
        }
      }

      >div:nth-of-type(2) {
        .px(256);
        .px(102, height);
        background: url("https://img.xunyinjiaoyou.com/static/activity/ChildrensDay/popup_ok_btn.png") no-repeat;
        background-size: contain;
        text-align: center;
        .px(102, line-height);
        .px(20, margin-top);
        .px(46, margin-bottom);
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
        .fs(40);
      }
    }
  }
</style>